<template>
  <div class="playListContainer">
    <playListDetailHead :title="`歌单广场`"></playListDetailHead>
    <van-tabs v-model="active" @click="changTab" ref="tab">
      <van-tab title="华语" ></van-tab>
      <van-tab title="流行" ></van-tab>
      <van-tab title="欧美" ></van-tab>
      <van-tab title="摇滚" ></van-tab>
      
    </van-tabs>

    <van-swipe 
    class="my-swipe" 
    indicator-color="white" 
    :height="500" 
    @change="changeSwiper" 
    ref="swiper"
    :show-indicators="false"
    >
      <van-swipe-item>
        <playListItem :identification="`华语`"></playListItem>
      </van-swipe-item>
      <van-swipe-item>
        <playListItem :identification="`流行`"></playListItem> 
      </van-swipe-item>
      <van-swipe-item>
        <playListItem :identification="`欧美`"></playListItem>
      </van-swipe-item>
      <van-swipe-item>
        <playListItem :identification="`摇滚`"></playListItem>
      </van-swipe-item>
    </van-swipe>

  </div>
</template>

<script>
import playListDetailHead from '@/components/TopList/topListNav.vue'
import playListItem from '@/components/playListDetail/allPlayList.vue'
import {reactive,ref,onBeforeUpdate,onMounted} from 'vue'
export default {
  setup(){
    //变量
    const tab=ref(null);
    const swiper=ref(null);
    const swiperIndex=ref(0)
    const active=ref(0)
    //方法
    function changeSwiper(index){
     swiperIndex.value=index
     console.log('swiper:',swiperIndex.value);
     tab.value.scrollTo (index)
    }
    function changTab(name){
     console.log('tab:',name);
     swiper.value.swipeTo(name)
    }
    return{
      changeSwiper,
      changTab,
      tab,
      swiper, 
      swiperIndex,
      active
    }
  },
 components:{
   playListDetailHead,
   playListItem,
 },
}
</script>

<style lang="less" scoped>
.playListContainer{
  width: 7.5rem;
  padding:0 0.2rem;
  height: 100vh;
  background-color: white;
  overflow: scroll;
  padding-top:1.3rem;
}
//滚动条隐藏
  .playListContainer::-webkit-scrollbar 
  {
    display: none;
  }
/deep/ .van-tabs__nav{
  background:white;
  height: 0.5rem;
  line-height: 0.3rem;
  /deep/ .van-tab{
    height:0.3rem;
    line-height: 0.3rem;
  }
}
.my-swipe{
//  overflow: hidden;
padding-bottom:0.4rem;
}
.my-swipe .van-swipe-item{
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    overflow-x: hidden;
    overflow-y: scroll;
  }
  // //滚动条隐藏
  // .my-swipe .van-swipe-item::-webkit-scrollbar 
  // {
  //   display: none;
  // }
</style>